<template>
  <div>
    <ZgDialog width="80%" v-model="visible" :title="title" @ok="onOk">
      <a-row :gutter="10">
        <a-col :span="6">
          <ZgInput placeholder="搜索"></ZgInput>
          <ZgOrgSelect @nodeClick="nodeClick"></ZgOrgSelect>
        </a-col>
        <a-col :span="18">
          <ZgNewPage
            ref="page"
            title="已选用户列表"
            :extraHeight="480"
            :pageOpt="pageOpt"
            :conditions="conditions"
            :columnCol="8"
            @search="onSearch"
            @condition="onSearchWithCondition">
            <template slot="columns">
              <a-table-column
                v-for="(h,i) in headers"
                :key="`column${i}`"
                :width="h.width===0 ? 'auto' : h.width"
                :title="h.label">
                <template slot-scope="record">
                  {{ record[h.code] }}
                </template>
              </a-table-column>
            </template>
          </ZgNewPage>
        </a-col>
      </a-row>
    </ZgDialog>
    <ZgButton :icon="icon" @click="visible=true">{{ title }}</ZgButton>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '选择用户'
    },
    icon: {
      type: String,
      default: 'search'
    }
  },
  data () {
    return {
      visible: false,
      pageOpt: {
        showSearchBtn: true,
        showRefreshBtn: true,
        showConditionBtn: true,
        showDataCheck: true
      },
      headers: [
        { code: 'username', label: '用户名', width: 0, isShow: true, sort: 0 },
        { code: 'name', label: '姓名', width: 0, isShow: true, sort: 0 },
        { code: 'org', label: '部门', width: 0, isShow: true, sort: 0 }
      ],
      conditions: [
        { code: 'name', compType: '单行文本', label: '姓名', defaultVal: '' },
        { code: 'sex', compType: '下拉选择', label: '性别', defaultVal: '', extra: { 下拉选项: [{ value: '1', label: '男' }, { value: '2', label: '女' }] } }
        // { code: 'age', compType: '整数', label: '年龄', defaultVal: 0 },
        // { code: 'political', compType: '字典', label: '政治面貌', defaultVal: '', extra: { 字典类型: 'political' } }
        // { code: 'is_use', compType: '布尔', label: '启用', defaultVal: 'false' }
        // { code: 'birth', compType: '日期区间', label: '生日', defaultVal: ['', ''] },
        // { code: 'age', compType: '整数区间', label: '年龄', defaultVal: [0, 100] },
        // { code: 'birth1', compType: '日期', label: '生日1', defaultVal: '2025-05-23' },
      ],
      list: [
        { id: '1', ck: false, name: '王鹏飞' },
        { id: '2', ck: false, name: '马跃东' },
        { id: '3', ck: false, name: '白探君' },
        { id: '4', ck: false, name: '李新' }
      ],
      currentNode: null,
      paramForm: {
        orgId: '',
        page: 1,
        pageSize: 30
      }
    }
  },
  methods: {
    onSearch (param) {
      if (this.currentNode && this.currentNode.key) {
        this.getUserpage(param)
      }
    },
    onSearchWithCondition (condition) {
      this.getUserpage(condition)
    },
    onOk () {
      this.$refs.page.checkIds(ids => {
        alert('ids', ids)
        // const list = this.$refs.page.getList()
        // const result = list.filter(t => {
        //   return ids.includes(t.id)
        // }).map(t => {
        //   return {
        //     id: t.id,
        //     name: t.name
        //   }
        // })
        this.visible = false
      }, '确定要选择这些用户么')
    },
    getUserpage (param) {
      const paramObj = Object.assign({}, this.paramForm, param)
      this.$http.post('/zg-system/user/page', paramObj, data => {
        const list = data.records.map((t, i) => {
          return {
            key: t.id,
            name: t.name,
            username: t.username,
            org: this.currentNode.title
          }
        })
        this.$refs.page.endSearch({
          total: list.length,
          list: list
        })
      })
    },
    nodeClick (node) {
      console.log('node', node)
      this.currentNode = node
      this.paramForm.orgId = node.key
      this.getUserpage()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
